<style lang="less"></style>
<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="500"
      :styles="{ top: '100px' }"
      @on-cancel="hideModal"
    >
      <Form ref="deviceForm" :model="deviceForm" :label-width="110" :rules="rulesForm">
        <Form-item label="设备名称" prop="deviceName">
          <Input
            type="text"
            v-model="deviceForm.deviceName"
            clearable
            placeholder="请输入设备名称"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="设备型号" prop="deviceModel">
          <Input
            type="text"
            v-model="deviceForm.deviceModel"
            :max="1"
            clearable
            placeholder="请输入设备型号"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="所属层数" prop="layerRow">
          <Select v-model="deviceForm.layerRow" style="width: 300px;">
            <Option v-for="item in layerList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </Form-item>
        <Form-item label="IP" prop="ipaddr">
          <Input
            type="text"
            v-model="deviceForm.ipaddr"
            clearable
            placeholder="请输入IP"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="设备类型" prop="deviceType">
          <Select v-model="deviceForm.deviceType" style="width: 300px;">
            <Option
              v-for="item in deviceTypeList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="端口" prop="devicePort">
          <InputNumber
            v-model="deviceForm.devicePort"
            clearable
            placeholder="请输入端口"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="备注" prop="remark">
          <Input
            type="textarea"
            v-model="deviceForm.remark"
            clearable
            placeholder="请输入备注"
            style="width: 300px;"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideModal">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getDeviceInfo,
  getFrameInfo,
  addDevice,
  editDevice
} from "@/api/device";

import util from "@/libs/util.js";

export default {
  name: "device-form",
  components: {},
  props: {
    deviceModalVisible: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    modalType: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    frameId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    deviceId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      modalVisible: false,
      deviceTypeList: [{ value: 1, label: "IFMS-1000" }],
      layerList: [],
      deviceForm: {
        deviceId: "",
        deviceName: "",
        layerRow: "",
        deviceModel: "",
        ipaddr: "",
        deviceType: "",
        devicePort: "",
        remark: ""
      },
      rulesForm: {
        deviceName: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur"
          }
        ],
        deviceModel: [
          {
            required: true,
            message: "设备型号不能为空",
            trigger: "blur"
          }
        ],
        layerRow: [
          {
            required: true,
            message: "所属层数必选",
            trigger: "change",
            type: "number"
          }
        ],
        ipaddr: [
          {
            required: true,
            message: "IP不能为空",
            trigger: "blur",
            type: "string"
          }
        ],
        deviceType: [
          {
            required: true,
            message: "设备类型必选",
            trigger: "change",
            type: "number"
          }
        ],
        devicePort: [
          {
            required: true,
            message: "端口不能为空",
            trigger: "blur",
            type: "integer"
          }
        ]
      },
      submitLoading: false
    };
  },
  computed: {
    modalTitle() {
      return this.modalType == 0 ? "添加设备" : "修改设备";
    }
  },
  watch: {
    deviceModalVisible(newVal, oldVal) {
      if (newVal) {
        this.modalVisible = newVal;

        if (this.modalType == 1) {
          this.edit();
        } else {
          this.add();
        }
      }
    }
  },
  methods: {
    init() {},
    add() {
      this.$refs.deviceForm.resetFields();
      this.deviceForm.frameId = this.frameId;
      getFrameInfo({ frameId: this.frameId }).then(res => {
        if (res.code == 0) {
          let layer = res.data.layer;
          for (let i = 0; i < layer; i++) {
            this.layerList.push(i + 1);
          }
        }
      });
    },
    edit() {
      this.$refs.deviceForm.resetFields();
      getDeviceInfo({ deviceId: this.deviceId }).then(
        res => {
          if (res.code == 0) {
            this.deviceForm = res.data;
            getFrameInfo({ frameId: this.deviceForm.frameId }).then(res => {
              if (res.code == 0) {
                let layer = res.data.layer;
                for (let i = 0; i < layer; i++) {
                  this.layerList.push(i + 1);
                }
              }
            });
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },

    /**
     * 提交新增Device
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.deviceForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.deviceForm);
            console.log("submit", obj);
            addDevice(this.deviceForm).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("新增成功");
                  this.hideModal();
                  this.$emit("updateDeviceTree");
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      } else {
        this.$refs.deviceForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.deviceForm);
            editDevice(obj).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("编辑成功");
                  this.$emit("updateDeviceTree");
                  this.hideModal();
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      }
    },
    hideModal() {
      this.modalVisible = false;
      this.$emit("hideDeviceModal");
    }
  },
  mounted() {
    this.init();
  }
};
</script>
